<template>
  <div class="dashboard-container">
    <!-- 欢迎卡片 -->
    <el-card class="welcome-card">
      <div class="welcome-content">
        <div class="welcome-icon">
          <el-icon><Monitor /></el-icon>
        </div>
        <div class="welcome-text">
          <h2>欢迎使用Go-DDNS服务器</h2>
          <p>通过简单配置，管理您的动态DNS解析服务</p>
          <el-button type="primary" @click="$router.push('/ddns')">配置DDNS</el-button>
        </div>
      </div>
    </el-card>

    <!-- 快速统计 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8">
        <div class="stats-card">
          <div class="stats-header">总域名数</div>
          <div class="stats-value">{{ domainsInfo.count || 0 }}</div>
          <el-progress :percentage="domainsInfo.count ? 100 : 0" :format="() => ''" stroke-width="4" status="success"></el-progress>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <div class="stats-card">
          <div class="stats-header">已更新次数</div>
          <div class="stats-value">23K</div>
          <el-progress :percentage="80" :format="() => ''" stroke-width="4" color="#ff7759"></el-progress>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <div class="stats-card">
          <div class="stats-header">正常运行时间</div>
          <div class="stats-value">{{ status.uptime || '0分钟' }}</div>
          <el-progress :percentage="90" :format="() => ''" stroke-width="4" color="#3d7fff"></el-progress>
        </div>
      </el-col>
    </el-row>

    <!-- 服务状态卡片 -->
    <h3 class="section-title">服务概况</h3>
    <div class="service-cards">
      <!-- DDNS服务卡片 -->
      <el-card class="service-card">
        <div class="service-card-content">
          <div class="service-icon">
            <el-icon><Connection /></el-icon>
          </div>
          <div class="service-info">
            <h3>DDNS服务</h3>
            <p>当前状态: <el-tag :type="status.running ? 'success' : 'info'">{{ status.running ? '运行中' : '未运行' }}</el-tag></p>
            <p>最后更新: {{ status.lastUpdate || '暂无数据' }}</p>
            <el-button type="primary" size="small" @click="$router.push('/ddns')">查看详情</el-button>
          </div>
        </div>
      </el-card>

      <!-- IP地址卡片 -->
      <el-card class="service-card">
        <div class="service-card-content">
          <div class="service-icon">
            <el-icon><Position /></el-icon>
          </div>
          <div class="service-info">
            <h3>IP地址状态</h3>
            <p>当前IPv4: {{ ipInfo.ipv4 || '暂无数据' }}</p>
            <p>当前IPv6: {{ ipInfo.ipv6 || '暂无数据' }}</p>
            <el-button size="small" @click="refreshIpInfo">刷新IP信息</el-button>
          </div>
        </div>
      </el-card>

      <!-- 域名卡片 -->
      <el-card class="service-card">
        <div class="service-card-content">
          <div class="service-icon">
            <el-icon><DataAnalysis /></el-icon>
          </div>
          <div class="service-info">
            <h3>域名概况</h3>
            <p>管理域名: {{ domainsInfo.count || 0 }} 个</p>
            <div v-if="domainsInfo.domains && domainsInfo.domains.length">
              <p v-for="(domain, index) in domainsInfo.domains" :key="index">
                {{ domain }}
              </p>
            </div>
            <p v-else>暂无域名配置</p>
            <el-button type="primary" size="small" @click="$router.push('/ddns')">管理域名</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 系统状态 -->
    <h3 class="section-title">系统状态</h3>
    <el-card>
      <div class="system-info-container">
        <div class="system-info-item">
          <h4>运行状态</h4>
          <div class="progress-circle">
            <div class="progress-circle-bg"></div>
            <div class="progress-circle-overlay">
              <span>{{ status.running ? '正常' : '停止' }}</span>
            </div>
          </div>
        </div>
        <div class="system-info-item">
          <h4>检查间隔</h4>
          <el-icon><AlarmClock /></el-icon>
          <span>{{ config.checkInterval || 300 }}秒</span>
        </div>
        <div class="system-info-item">
          <h4>IP版本</h4>
          <el-icon><Guide /></el-icon>
          <span>{{ config.ipVersion || 'IPv4' }}</span>
        </div>
        <div class="system-info-item">
          <h4>配置状态</h4>
          <div>
            <el-icon v-if="domainsInfo.count > 0"><Check /></el-icon>
            <el-icon v-else><Close /></el-icon>
            <span>{{ domainsInfo.count > 0 ? '已配置' : '未配置' }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 最近活动 -->
    <h3 class="section-title">最近活动</h3>
    <el-card>
      <el-empty v-if="!activities.length" description="暂无活动记录"></el-empty>
      <el-timeline v-else>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :type="activity.type"
          :color="activity.color"
          :timestamp="activity.time"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { Monitor, Connection, Position, DataAnalysis, AlarmClock, Guide, Check, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import Notification from '../utils/notification'

export default {
  name: 'HomePage',
  components: {
    Monitor,
    Connection,
    Position,
    DataAnalysis,
    AlarmClock,
    Guide,
    Check,
    Close
  },
  setup() {
    const status = ref({
      running: false,
      lastUpdate: null,
      uptime: null
    })

    const ipInfo = ref({
      ipv4: null,
      ipv6: null
    })

    const domainsInfo = ref({
      count: 0,
      domains: []
    })

    const config = ref({
      checkInterval: 300,
      ipVersion: 'IPv4'
    })

    const activities = ref([])

    const loadData = async () => {
      try {
        const response = await fetch('/api/ddns/config')
        const result = await response.json()
        
        if (result.success && result.data) {
          const data = result.data
          
          // 更新配置信息
          config.value.checkInterval = data.check_interval
          config.value.ipVersion = data.ip_version
          
          // 更新域名信息
          if (data.domain_names && data.domain_names.length) {
            domainsInfo.value.count = data.domain_names.length
            domainsInfo.value.domains = data.domain_names.filter(d => d.trim() !== '')
          }
          
          // 假设服务正在运行
          status.value.running = true
          status.value.lastUpdate = new Date().toLocaleString()
          status.value.uptime = '正在计算...'

          // 模拟活动数据
          if (domainsInfo.value.count > 0) {
            activities.value = [
              {
                content: `IP地址已更新: ${ipInfo.value.ipv4}`,
                time: '10分钟前',
                type: 'success',
                color: '#67C23A'
              },
              {
                content: `更新域名: ${domainsInfo.value.domains[0]}`,
                time: '30分钟前',
                type: 'primary',
                color: '#409EFF'
              },
              {
                content: '检测IP地址变化',
                time: '1小时前',
                type: 'info',
                color: '#909399'
              }
            ]
          }
        }
      } catch (error) {
        console.error('加载配置失败:', error)
        Notification.error('加载数据失败，请检查后端服务是否正常运行')
      }
    }

    const refreshIpInfo = () => {
      // 在实际应用中，这里应该调用API获取当前IP信息
      // 这里用模拟数据
      ipInfo.value.ipv4 = '192.168.1.1'
      ipInfo.value.ipv6 = '2001:0db8:85a3:0000:0000:8a2e:0370:7334'
      Notification.success('IP信息已刷新')
    }

    onMounted(() => {
      loadData()
      // 模拟IP信息 (在实际应用中应通过API获取)
      setTimeout(() => {
        ipInfo.value.ipv4 = '203.0.113.1'
        ipInfo.value.ipv6 = '2001:0db8:85a3:0000:0000:8a2e:0370:7334'
      }, 500)
    })

    return {
      status,
      ipInfo,
      domainsInfo,
      config,
      activities,
      refreshIpInfo
    }
  }
}
</script>

<style scoped>
.section-title {
  margin: 30px 0 20px;
  color: var(--text-color);
  font-weight: 600;
  position: relative;
  padding-left: 15px;
  display: inline-block;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
}

.welcome-text h2 {
  margin-bottom: 10px;
  font-weight: 600;
}

.welcome-text p {
  margin-bottom: 20px;
  color: var(--text-secondary);
}

.system-info-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.system-info-item {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  background: rgba(245, 247, 250, 0.8);
  border-radius: 8px;
  text-align: center;
}

.system-info-item h4 {
  margin-bottom: 15px;
  color: var(--text-secondary);
  font-weight: 400;
}

.system-info-item .el-icon {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.status-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.status-running {
  background-color: #67C23A;
  box-shadow: 0 0 10px rgba(103, 194, 58, 0.7);
}

.status-stopped {
  background-color: #F56C6C;
  box-shadow: 0 0 10px rgba(245, 108, 108, 0.7);
}

.el-progress {
  margin-top: 10px;
}

.progress-circle-bg {
  background: linear-gradient(90deg, #f0f0f0 0%, #e6e6e6 100%);
}

@media (max-width: 768px) {
  .system-info-container {
    flex-direction: column;
  }

  .system-info-item {
    width: 100%;
  }
}
</style> 